<template>
	<view class="page">
		<!-- 顶端导航栏 -->
		<view class="nav-bar">
			<view class="left"></view>
			<view class="title">
				{{title}}
			</view>
			<view class="right">
				<u-icon name="more-dot-fill"></u-icon>
			</view>

		</view>

		<!-- 任务列表区域 -->
		<scroll-view class="page" scroll-x="true" enable-flex="true" @scroll="scroll">
			<biz-phase v-for="(item, index) in phase_list" :phase="item" :case_list="case_list" :key="index"
				@goto_detail="goto_detail" />
		</scroll-view>

		<!-- 标签弹出框 -->
		<u-popup v-model="show_case_detail" mode="center">
			<biz-case-editor></biz-case-editor>
		</u-popup>

	</view>

</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex";


	export default {
		data() {
			return {
				title: "Hello",
				show_case_detail: false,
			};
		},
		computed: {
			...mapState({}),
			...mapGetters("mainpage", ["tag_list", "phase_list", "case_list", "case_count"]),
		},
		onLoad() {
			uni.showLoading();

			this.$store.dispatch("mainpage/fetch_all_phase").then((res) => {
				uni.hideLoading();
			});
		},
		methods: {
			scroll(event) {
				// console.log(event.detail);
			},
			goto_detail(item) {
				let itemId = item._id["$oid"];

				uni.navigateTo({
					url: "../case-detail/index?itemId=" + itemId,
				});

				// #ifdef APP-PLUS || MP
				// uni.navigateTo({
				//   url: "../case-detail/index?title=" + itemId,
				// });
				// #endif

				// #ifdef H5
				// this.show_case_detail = true;
				// #endif
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		white-space: nowrap;
		background-color: $uni-bg-color-main;

		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: $uni-text-color-inverse;

			.title {
				font-size: medium;
				padding: 12rpx 0rpx;
			}

			.right {
				padding-right: 25rpx;
			}
		}

	}
</style>
